<template>
  <div class="api-doc-editor">
    <div class="editor-container">
      <div class="editor-header">
        <div class="header-content">
          <div class="header-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z" stroke="#409EFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" stroke="#409EFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="header-text">
            <h2 class="editor-title">接口文档编辑器</h2>
            <p class="editor-subtitle">定义接口参数和返回结构</p>
          </div>
        </div>
        <div class="header-tag">
          <el-tag 
            :type="getMethodTagType(apiData.method)" 
            size="small"
            effect="dark"
          >
            {{ apiData.method }}
          </el-tag>
        </div>
      </div>
      
      <div class="editor-content">
        <!-- 请求行 -->
        <div class="request-line">
          <div class="method-selector">
            <el-select 
              v-model="apiData.method" 
              placeholder="方法"
              size="small"
            >
              <el-option label="GET" value="GET"></el-option>
              <el-option label="POST" value="POST"></el-option>
              <el-option label="PUT" value="PUT"></el-option>
              <el-option label="DELETE" value="DELETE"></el-option>
              <el-option label="PATCH" value="PATCH"></el-option>
            </el-select>
          </div>
          <div class="url-input-container">
            <span class="url-prefix">/api</span>
            <el-input 
              v-model="apiData.url" 
              placeholder="请输入接口路径"
              class="url-input"
            ></el-input>
          </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content-sections">
          <!-- 参数部分 -->
          <div class="section">
            <div class="section-header">
              <h3 class="section-title">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" class="section-icon">
                  <path d="M4 6h16M4 12h16M4 18h16" stroke="#67C23A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                请求参数
              </h3>
              <el-button 
                type="primary" 
                size="small" 
                @click="addParameter"
                round
                class="add-btn"
              >
                <el-icon><Plus /></el-icon>
                添加参数
              </el-button>
            </div>
            
            <div class="table-container">
              <el-table 
                :data="apiData.parameters" 
                style="width: 100%" 
                size="small"
                empty-text="暂无参数，点击上方按钮添加"
              >
                <el-table-column prop="name" label="字段名" width="140">
                  <template #default="scope">
                    <el-input 
                      v-model="scope.row.name" 
                      placeholder="字段名"
                      size="small"
                      class="table-input"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" width="100">
                  <template #default="scope">
                    <el-select 
                      v-model="scope.row.type" 
                      placeholder="类型"
                      size="small"
                      class="table-select"
                    >
                      <el-option label="string" value="string"></el-option>
                      <el-option label="number" value="number"></el-option>
                      <el-option label="boolean" value="boolean"></el-option>
                      <el-option label="array" value="array"></el-option>
                      <el-option label="object" value="object"></el-option>
                      <el-option label="file" value="file"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="required" label="必填" width="80" align="center">
                  <template #default="scope">
                    <el-switch 
                      v-model="scope.row.required"
                      size="small"
                      inline-prompt
                      active-text="是"
                      inactive-text="否"
                    ></el-switch>
                  </template>
                </el-table-column>
                <el-table-column prop="description" label="备注">
                  <template #default="scope">
                    <el-input 
                      v-model="scope.row.description" 
                      placeholder="备注"
                      size="small"
                      class="table-input"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                  <template #default="scope">
                    <el-button 
                      type="danger" 
                      size="small" 
                      @click="removeParameter(scope.$index)"
                      circle
                      class="delete-btn"
                    >
                      <el-icon size="12"><Delete /></el-icon>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          
          <!-- 返回体部分 -->
          <div class="section">
            <div class="section-header">
              <h3 class="section-title">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" class="section-icon">
                  <path d="M5 12h14M12 5l7 7-7 7" stroke="#E6A23C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                返回体
              </h3>
              <el-button 
                type="primary" 
                size="small" 
                @click="addResponse"
                round
                class="add-btn"
              >
                <el-icon><Plus /></el-icon>
                添加字段
              </el-button>
            </div>
            
            <div class="table-container">
              <el-table 
                :data="apiData.response" 
                style="width: 100%" 
                size="small"
                empty-text="暂无返回字段，点击上方按钮添加"
              >
                <el-table-column prop="name" label="字段名" width="160">
                  <template #default="scope">
                    <el-input 
                      v-model="scope.row.name" 
                      placeholder="字段名"
                      size="small"
                      class="table-input"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" width="100">
                  <template #default="scope">
                    <el-select 
                      v-model="scope.row.type" 
                      placeholder="类型"
                      size="small"
                      class="table-select"
                    >
                      <el-option label="string" value="string"></el-option>
                      <el-option label="number" value="number"></el-option>
                      <el-option label="boolean" value="boolean"></el-option>
                      <el-option label="array" value="array"></el-option>
                      <el-option label="object" value="object"></el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="description" label="备注">
                  <template #default="scope">
                    <el-input 
                      v-model="scope.row.description" 
                      placeholder="备注"
                      size="small"
                      class="table-input"
                    ></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80" align="center">
                  <template #default="scope">
                    <el-button 
                      type="danger" 
                      size="small" 
                      @click="removeResponse(scope.$index)"
                      circle
                      class="delete-btn"
                    >
                      <el-icon size="12"><Delete /></el-icon>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          
          <!-- 预览部分 -->
          <div class="section">
            <div class="section-header">
              <h3 class="section-title">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" class="section-icon">
                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  <circle cx="12" cy="12" r="3" stroke="#909399" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                文档预览
              </h3>
            </div>
            
            <div class="preview-container">
              <div class="markdown-preview" v-html="renderedMarkdown"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, watch } from 'vue'
import { marked } from 'marked'
import { Plus, Delete } from '@element-plus/icons-vue'

export default {
  name: 'ApiDocEditor',
  components: {
    Plus,
    Delete
  },
  props: {
    modelValue: {
      type: Object,
      default: () => ({
        method: 'GET',
        url: '/example',
        parameters: [],
        response: []
      })
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    // 初始化数据
    const apiData = reactive({
      method: props.modelValue.method || 'GET',
      url: props.modelValue.url || '/example',
      parameters: props.modelValue.parameters || [],
      response: props.modelValue.response || []
    })
    
    // 获取请求方式对应的标签类型
    const getMethodTagType = (method) => {
      switch(method) {
        case 'GET': return 'primary'
        case 'POST': return 'success'
        case 'PUT': return 'warning'
        case 'DELETE': return 'danger'
        default: return 'info'
      }
    }
    
    // 添加参数
    const addParameter = () => {
      apiData.parameters.push({
        name: '',
        type: 'string',
        required: false,
        description: ''
      })
    }
    
    // 删除参数
    const removeParameter = (index) => {
      apiData.parameters.splice(index, 1)
    }
    
    // 添加返回字段
    const addResponse = () => {
      apiData.response.push({
        name: '',
        type: 'string',
        description: ''
      })
    }
    
    // 删除返回字段
    const removeResponse = (index) => {
      apiData.response.splice(index, 1)
    }
    
    // 生成Markdown文档
    const generatedMarkdown = computed(() => {
      let md = `# ${apiData.method} /api${apiData.url}\n\n`
      
      // 参数部分
      md += '## 请求参数\n\n'
      if (apiData.parameters.length > 0) {
        md += '| 字段名 | 类型 | 是否必填 | 备注 |\n'
        md += '| ------ | ---- | -------- | ---- |\n'
        apiData.parameters.forEach(param => {
          md += `| ${param.name || ''} | ${param.type || ''} | ${param.required ? '是' : '否'} | ${param.description || ''} |\n`
        })
        md += '\n'
      } else {
        md += '无\n\n'
      }
      
      // 返回体部分
      md += '## 返回体\n\n'
      if (apiData.response.length > 0) {
        md += '| 字段名 | 类型 | 备注 |\n'
        md += '| ------ | ---- | ---- |\n'
        apiData.response.forEach(resp => {
          md += `| ${resp.name || ''} | ${resp.type || ''} | ${resp.description || ''} |\n`
        })
        md += '\n'
      } else {
        md += '无\n\n'
      }
      
      return md
    })
    
    // 渲染Markdown为HTML
    const renderedMarkdown = computed(() => {
      return marked(generatedMarkdown.value)
    })
    
    // 监听数据变化并触发更新事件
    watch(apiData, () => {
      emit('update:modelValue', {...apiData})
    }, { deep: true })
    
    return {
      apiData,
      getMethodTagType,
      addParameter,
      removeParameter,
      addResponse,
      removeResponse,
      generatedMarkdown,
      renderedMarkdown
    }
  }
}
</script>

<style scoped>
.api-doc-editor {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.editor-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #ebeef5;
}

.editor-header {
  background: #f5f7fa;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  background: #ecf5ff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editor-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 2px 0;
  color: #303133;
}

.editor-subtitle {
  font-size: 12px;
  margin: 0;
  color: #909399;
}

.editor-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.request-line {
  display: flex;
  gap: 12px;
  padding: 20px;
  background: #fafafa;
  border-bottom: 1px solid #ebeef5;
}

.method-selector {
  width: 120px;
}

.method-selector :deep(.el-select) {
  width: 100%;
}

.url-input-container {
  flex: 1;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 12px;
  transition: all 0.3s ease;
}

.url-input-container:hover {
  border-color: #409EFF;
}

.url-prefix {
  color: #909399;
  font-size: 14px;
  margin-right: 8px;
}

.url-input {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.url-input :deep(.el-input__inner) {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.content-sections {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
}

.section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #303133;
}

.section-icon {
  flex-shrink: 0;
}

.add-btn {
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.table-container {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.table-container :deep(.el-table) {
  border: none;
}

.table-input :deep(.el-input__inner),
.table-select :deep(.el-input__inner) {
  border-radius: 4px;
}

.table-input :deep(.el-input__inner):focus,
.table-select :deep(.el-input__inner):focus {
  box-shadow: 0 0 0 1px #409EFF inset;
}

.delete-btn {
  transition: all 0.3s ease;
}

.delete-btn:hover {
  transform: scale(1.1);
}

.preview-container {
  background: white;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  min-height: 200px;
}

.markdown-preview {
  line-height: 1.6;
}

.markdown-preview :deep(h1) {
  font-size: 24px;
  margin: 0 0 16px 0;
  color: #303133;
  border-bottom: 2px solid #409EFF;
  padding-bottom: 8px;
}

.markdown-preview :deep(h2) {
  font-size: 20px;
  margin: 20px 0 12px 0;
  color: #606266;
}

.markdown-preview :deep(h3) {
  font-size: 18px;
  margin: 16px 0 12px 0;
  color: #909399;
}

.markdown-preview :deep(table) {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.markdown-preview :deep(th) {
  background: #f5f7fa;
  padding: 12px 8px;
  text-align: left;
  font-weight: 600;
}

.markdown-preview :deep(td) {
  padding: 10px 8px;
  border-top: 1px solid #ebeef5;
}

.markdown-preview :deep(tr:nth-child(even)) {
  background: #fafafa;
}

.markdown-preview :deep(tr:hover) {
  background: #f0f5ff;
}
</style>